<form [formGroup]="formGroup"
      class="container">
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'device.tag-options-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div mat-dialog-content>
        <div class="block mt10 flex" style="text-align: center;">
            <div class="my-form-field w100">
                <span>{{'device.tag-daq-enabled' | translate}}</span>
                <mat-slide-toggle color="primary" formControlName="enabled"></mat-slide-toggle>
            </div>
            <div class="my-form-field w100">
                <span>{{'device.tag-daq-changed' | translate}}</span>
                <mat-slide-toggle color="primary" formControlName="changed"></mat-slide-toggle>
            </div>
            <div class="my-form-field w100">
                <span>{{'device.tag-daq-restored' | translate}}</span>
                <mat-slide-toggle color="primary" formControlName="restored"></mat-slide-toggle>
            </div>
        </div>
        <div class="my-form-field item-block">
            <span>{{'device.tag-daq-interval' | translate}}</span>
            <input numberOnly formControlName="interval" min="0" type="number">
        </div>
        <div class="my-form-field item-block mt10">
            <span>{{'device.tag-format' | translate}}</span>
            <input numberOnly formControlName="format" min="0" max="10" type="number">
        </div>
        <div class="my-form-field item-block mt10">
            <span>{{'device.tag-deadband' | translate}}</span>
            <input numberOnly formControlName="deadband" type="number">
        </div>
        <div *ngIf="!isFuxaServerTag()">
            <div class="my-form-field item-block mt10">
                <span>{{'device.tag-scale' | translate}}</span>
                <mat-select formControlName="scaleMode">
                    <mat-option *ngFor="let ev of scaleModeType | enumToArray"
                        matTooltip="{{ev.value + '-tooltip' | translate}}" [value]="ev.key">
                        {{ ev.value | translate }}
                    </mat-option>
                </mat-select>
            </div>
            <ng-container [ngSwitch]="formGroup.controls.scaleMode.value">
                <ng-container *ngSwitchCase="'convertDateTime'">
                    <div class="my-form-field item-block mt5">
                        <span>{{'device.tag-convert-datetime-format' | translate}}</span>
                        <input formControlName="dateTimeFormat">
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'convertTickTime'">
                    <div class="my-form-field item-block mt5">
                        <span>{{'device.tag-convert-ticktime-format' | translate}}</span>
                        <input formControlName="dateTimeFormat">
                    </div>
                </ng-container>
                <ng-container *ngSwitchCase="'linear'">
                    <div class="block mt5">
                        <div class="my-form-field">
                            <span>{{'device.tag-raw-low' | translate}}</span>
                            <input formControlName="rawLow" type="number" style="width:140px">
                        </div>
                        <div class="my-form-field ml10">
                            <span>{{'device.tag-raw-high' | translate}}</span>
                            <input formControlName="rawHigh" type="number" style="width:140px">
                        </div>
                    </div>
                    <div class="block mt5">
                        <div class="my-form-field">
                            <span>{{'device.tag-scaled-low' | translate}}</span>
                            <input formControlName="scaledLow" type="number" style="width:140px">
                        </div>
                        <div class="my-form-field ml10">
                            <span>{{'device.tag-scaled-high' | translate}}</span>
                            <input formControlName="scaledHigh" type="number" style="width:140px">
                        </div>
                    </div>
                </ng-container>
            </ng-container>
            <div class="my-form-field item-block mt10">
                <span>{{'device.tag-scale-read-script' | translate}}</span>
                <mat-select formControlName="scaleReadFunction"
                            matTooltip="{{'device.tag-scale-read-script-tooltip' | translate}}">
                    <mat-option (click)="formGroup.controls.scaleReadFunction.reset()"></mat-option>
                    <mat-option *ngFor="let script of scripts; index as i" [value]="script.id">{{script.name}}</mat-option>
                </mat-select>
            </div>
            <div *ngIf="configedReadParams[formGroup.value.scaleReadFunction]?.length > 0"
                    class="my-form-field block mt5 ml15">
                <span>{{'device.tag-scale-read-script-params' | translate}}</span>
                <div matTooltip="{{'device.tag-scale-script-params-tooltip' | translate}}">
                    <div *ngFor="let item of configedReadParams[formGroup.value.scaleReadFunction]"
                            class="item-param mt5">
                        <input [value]="item.name" matTooltip="item.name" type="text" readonly [disabled]="true">
                        <input [(ngModel)]="item.value" class="ml5"
                                [ngModelOptions]="{standalone: true}">
                    </div>
                </div>
            </div>
            <div class="my-form-field item-block mt10">
                <span>{{'device.tag-scale-write-script' | translate}}</span>
                <mat-select formControlName="scaleWriteFunction"
                            matTooltip="{{'device.tag-scale-write-script-tooltip' | translate}}">
                    <mat-option (click)="formGroup.controls.scaleWriteFunction.reset()"></mat-option>
                    <mat-option *ngFor="let script of scripts; index as i" [value]="script.id">{{script.name}}</mat-option>
                </mat-select>
            </div>
            <div *ngIf="configedWriteParams[formGroup.value.scaleWriteFunction]?.length > 0"
                    class="my-form-field block mt5 ml15">
                <span>{{'device.tag-scale-write-script-params' | translate}}</span>
                <div matTooltip="{{'device.tag-scale-script-params-tooltip' | translate}}">
                    <div *ngFor="let item of configedWriteParams[formGroup.value.scaleWriteFunction]"
                            class="item-param mt5">
                        <input [value]="item.name" matTooltip="item.name" type="text" readonly [disabled]="true">
                        <input [(ngModel)]="item.value" class="ml5"
                                [ngModelOptions]="{standalone: true}">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()" [disabled]="disableForm()">{{'dlg.ok' | translate}}</button>
    </div>
</form>
